<template>
  <div class="webchatTransfer">
    <div class="top">
      <el-input class="searchIpt" v-model.trim="searchInt"
        placeholder="请输入名称" size="mini" suffix-icon="el-icon-search">
      </el-input>
      <span class="V7_iconfont V7_iconV7tubiao_shuaxin" @click="refresh"></span>
    </div>
    <ul class="content">
      <li v-for="(item, index) in peerAndOnlineAgentsObj" :key="index" class="peerItem">
        <div @click="peerClick(item)">
          <span :class="item.isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></span>
          <span class="peerName">
            {{item.peerName}}<span class="online">{{'(在线·' + item.users.length + ')'}}</span>
          </span>
          <span class="fr transferBtn" @click="transferPeer($event, item)">转接</span>
        </div>
        <ul class="agentBox" v-show="item.isShow">
          <li v-for="(agentItem, agentIndex) in item.newUsers" :key="agentIndex" class="agentItem">
            <span class="agentName">{{`${agentItem.agentName}(${agentItem.imDealCount}/${agentItem.maxLimit})`}}</span>
            <span class="transferAgent fr V7_iconfont V7_iconV7tubiao_zhuanchuhuihua" @click="transferAgent(agentItem, index)"></span>
          </li>
        </ul>
      </li>
      <div v-if="peerAndOnlineAgentsObj.length === 0" class="noData">
        暂无数据
      </div>
    </ul>
  </div>
</template>
<script lang="ts">
import { deepClone } from '@/utils/common'
import { Component, Vue, Prop } from 'vue-property-decorator'
import { TransferPeerObj, ArrayObj } from '@/views/webchat/webchatInterface'
@Component({
  name: 'webchatTransfer'
})
export default class WebchatTransfer extends Vue {
  @Prop() private peerAndOnlineAgents!: ArrayObj[]

  private searchInt = '' // 输入框

  get peerAndOnlineAgentsObj () {
    let peerAndOnlineAgents = deepClone(this.peerAndOnlineAgents) // 当前在线的技能组和座席
    peerAndOnlineAgents = this.peerAndOnlineAgents.filter((item: any) => {
      if (item.users) { // 如果技能组下有在线座席
        const usersArr = deepClone(item.users)
        item.newUsers = usersArr.filter((agentItem: any) => { // 过滤符合搜索条件的座席
          return agentItem.agentName.indexOf(this.searchInt) > -1
        })
        if (item.newUsers.length > 0) { // 如果技能组下符合搜索条件的座席需返回当前的技能组
          return true
        } else { // 如果没有在线座席 需返回符合搜索条件的技能组
          return item.peerName.indexOf(this.searchInt) > -1
        }
      } else { // 如果当前技能组没有在线座席需返回符合条件的技能组
        return item.peerName.indexOf(this.searchInt) > -1
      }
    })
    return peerAndOnlineAgents
  }

  private peerClick (item: TransferPeerObj) { // 技能组展开收起事件
    Vue.set(item, 'isShow', !item.isShow)
  }

  private refresh () {
    this.$emit('refreshTransfer')
  }

  private transferPeer ($event: any, item: TransferPeerObj) { // 转接技能组事件
    $event.stopPropagation()
    this.$emit('transferPeer', item)
  }

  private transferAgent (agentItem: TransferPeerObj, index: number) { // 转接座席事件
    const peerInfo = this.peerAndOnlineAgentsObj[index] // 获取当前座席所在技能组信息
    this.$emit('transferAgent', { agentInfo: agentItem, peerInfo })
  }
}
</script>
<style lang="stylus" scoped>
  .webchatTransfer
    .V7_iconfont
      color #767E91
      cursor pointer
    .top
      border-bottom 1px solid $border-main
      padding 12px
      .searchIpt
        width 88%
        margin-right 10px
    .content
      padding 12px
      height 243px
      overflow-y auto
      .noData
        text-align center
        line-height 210px
        color $fc-gray4
      .el-icon-arrow-up, .el-icon-arrow-down
        font-size 14px
        margin-right 5px
        color #B3B9C7
        vertical-align top
      .peerName
        font-size 14px
        color $fc-gray2
        display inline-block
        width 170px
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
      .online
        margin-left 4px
        color #767E91
      .peerItem
        cursor pointer
        font-size 12px
        margin 6px 0px
        .transferBtn
          color $c-main
          font-size 14px
      .agentBox
        margin-left 18px
        .agentItem
          color #767E91
          font-size 12px
          margin 6px 0px
          .agentName
            display inline-block
            width 175px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .transferAgent
            vertical-align top
            font-size 12px
</style>
